<template>
  <!-- 新增企业角色 表单 -->
  <a-modal
    v-model:open="visible"
    :title="isEdit ? '编辑企业角色' : '新增企业角色'"
    class="addStation"
    destroyOnClose
    :width="450"
    @cancel="cancel"
    centered
  >
    <a-form
      :model="form"
      :rules="rules"
      layout="inline"
      :labelCol="labelCol"
      ref="formRef"
    >
      <a-form-item label="企业角色名称" name="name">
        <a-input
          v-model:value="form.name"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="企业角色编码" name="code">
        <a-input
          v-model:value="form.code"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input
          v-model:value="form.remark"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="权限">
        <a-button key="submit" type="link" size="small" @click="handleAuth"
          >权限设置</a-button
        >
      </a-form-item>
    </a-form>
    <template #footer>
      <div class="footerBar">
        <a-button key="back" @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          @click="handleSubmit"
          >确认</a-button
        >
      </div>
    </template>
  </a-modal>

  <!-- 权限设置 -->
  <AuthConfig
    :authConfigVisible="authConfigVisible"
    :defaultIds="authIds"
    :isEdit="isEdit"
    :showDataPermi="false"
    @update:authConfigVisible="authConfigVisible = $event"
    @changeAuth="changeAuth"
  />
</template>
<script setup>
import AuthConfig from "@/views/conpoments/AuthConfig/index.vue";
const $api = inject("$api");
const props = defineProps({
  addRoleVisible: {
    type: Boolean,
    default: false,
  },
  rowData: {
    type: Object,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const loading = ref(false);
const visible = ref(props.addRoleVisible);
const authConfigVisible = ref(false);
const emits = defineEmits(["update:addRoleVisible", "getRoleList"]);
watch(
  () => props.addRoleVisible,
  (val) => {
    visible.value = val;
    if (val && props.isEdit) {
      getRoleDetail();
      form.value = {
        ...props.rowData,
      };
    }
  }
);
const labelCol = { style: { width: "120px" } };
const formRef = ref(null);
const form = ref({
  account: undefined,
  username: undefined,
  email: undefined,
  phone: undefined,
  roleIds: undefined,
  deptIds: undefined,
  password: undefined,
});
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
});

const cancel = () => {
  emits("update:addRoleVisible", false);
  form.value = {
    account: undefined,
    username: undefined,
    email: undefined,
    phone: undefined,
    roleIds: undefined,
    deptIds: undefined,
    password: undefined,
  };
  formRef.value.clearValidate();
};
const handleAuth = () => {
  authConfigVisible.value = true;
};
const authIds = ref([]);
const changeAuth = (ids) => {
  authIds.value = ids;
  authConfigVisible.value = false;
};
const handleSubmit = () => {
  formRef.value
    .validate()
    .then(async () => {
      const params = {
        ...form.value,
        roleType: 1, // 角色类型 1：企业角色 2：内部角色组 3：内部子角色
        roleMenuIds: authIds.value,
      };
      if (props.isEdit) {
        // 编辑带上id
        params.id = props.rowData.id;
      }

      loading.value = true;
      const res = await $api.baseRole(params, props.isEdit ? "put" : "post");
      loading.value = false;
      if (res.code === 0) {
        message.success(props.isEdit ? "编辑成功" : "新增成功");
        cancel();
        emits("getRoleList");
      }
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const getRoleDetail = async () => {
  const res = await $api.roleDetail(props.rowData.id);
  authIds.value = res.data.roleMenuIds;
};
</script>

<style lang="less" scoped>
.form {
  padding: 0 40px;
  margin-top: 30px;
}
.formInput,
.formSelect {
  width: 250px;
}
.ant-form-item {
  margin-top: 20px;
}
.footerBar {
  text-align: center;
  margin-top: 30px;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelectContent {
  display: inline-block;
}
.areaSelect {
  display: inline-block;
  width: 113px;
  margin-right: 5px;
  &:last-child {
    margin-right: 0;
  }
}
</style>